<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8">

		<link rel="stylesheet" href="css/layui1.css" />
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/login.css" />
		<script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script>
			$(document).ready(function() {
				//打开会员登录 
				$("#Login_start_").click(function() {
					$("#regist_container").hide();
					$("#_close").show();
					$("#_start").animate({
						left: '350px',
						height: '520px',
						width: '400px'
					}, 500, function() {
						$("#login_container").show(500);
						$("#_close").animate({
							height: '40px',
							width: '40px'
						}, 500);
					});
				});
				//打开会员注册
				$("#Regist_start_").click(function() {
					$("#login_container").hide();
					$("#_close").show();
					$("#_start").animate({
						left: '350px',
						height: '520px',
						width: '400px'
					}, 500, function() {
						$("#regist_container").show(500);
						$("#_close").animate({
							height: '40px',
							width: '40px'
						}, 500);
					});
				});
				//关闭
				$("#_close").click(function() {
					
					$("#_close").animate({
						height: '0px',
						width: '0px'
					}, 500, function() {
						$("#_close").hide(500);
						$("#login_container").hide(500);
						$("#regist_container").hide(500);
						$("#_start").animate({
							left: '0px',
							height: '0px',
							width: '0px'
						}, 500);
					});
				});
				//去 注册
				$("#toRegist").click(function(){
					$("#login_container").hide(500);
					$("#loginByCode").hide(500);
					$("#reset_password").hide(500);
					$("#regist_container").show(500);
				});
				//去 登录
				$("#toLogin").click(function(){
					$("#regist_container").hide(500);
					$("#loginByCode").hide(500);
					$("#reset_password").hide(500);
					$("#login_container").show(500);
				});
				//去 验证码登录
				$("#toLoginBycode").click(function(){
					$("#login_container").hide(500);
					$("#regist_container").hide(500);
					$("#reset_password").hide(500);
					$("#loginByCode").show(500);
				});
				//返回密码 登录
				$("#toPassLogin").click(function(){
					$("#loginByCode").hide(500);
					$("#regist_container").hide(500);
					$("#reset_password").hide(500);
					$("#login_container").show(500);
				});
				//找回密码
				$("#toReset").click(function(){
					$("#loginByCode").hide(500);
					$("#regist_container").hide(500);
					$("#login_container").hide(500);
					$("#reset_password").show(500);
				});
				//返回登录
				$("#returnLogin").click(function(){
					$("#regist_container").hide(500);
					$("#loginByCode").hide(500);
					$("#reset_password").hide(500);
					$("#login_container").show(500);
				});
			});
		</script>
	</head>

	<body>
<div class="demo">

		<!-- 会员登录  -->
		<!--<div id='Login_start' style="position: absolute;" >-->
		<div class="abc">
		<div id='_start'>
			<div id='_close' style="display: none;">
				<span class="glyphicon glyphicon-remove"></span>
			</div>
			<br /> 
			<!--登录框-->
			<div id="login_container">
				<div id="lab1">
					<span id="lab_login">会员登录</span>
					<span id="lab_toRegist">
						&emsp;还没有账号&nbsp;
						<span id='toRegist' style="color: #EB9316;cursor: pointer;">立即注册</span>
					</span>
				</div>
				<div style="width:330px;">
					<span id="lab_type1">手机号/密码登陆</span>
				</div>
				<div id="form_container1">
					<br />
					<form class="layui-form">
					<input type="text" class="form-control" placeholder="手机号/用户名" id="login_number" value="15881601895" />
					<input type="password" class="form-control" placeholder="密码" id="login_password" />
		<!--			<input type="button" value="登录" class="btn btn-success" id="login_btn" />-->
					<button type="button" class="layui-btn layui-btn-radius" id="login_btn">登录</button>
					<span id="rememberOrfindPwd">
						<div class="layui-form-item">
						    <label class="layui-form-label" style="line-height: 50px;color:#000000">记住我</label>
						    <div class="layui-input-block">
						      <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF" id="rm">
						    </div>
						  </div>
					
					</span>
				
				  <div class="layui-form-item" style="color:#000000;margin-bottom:0px;margin-top: 80px;">
				    <label class="layui-form-label" style="line-height: 30px;">我是？</label>
				    <div class="layui-input-block" style="margin-left: auto;">
				      <input type="radio" name="login_container_type" value="学员" title="学员" checked="">
				      <input type="radio" name="login_container_type" value="教练" title="教练">
				      <input type="radio" name="login_container_type" value="场馆" title="场馆" >
				    </div>
				    </div>
				    
				</form>
				<div style="display:block;width:330px;height:40px;margin-left: 20px;">
					<span id="lab_type2" >切换登录方式</span>
					<a href="#"><span id="toReset" style="color: #000000;margin-left: 100px;">忘记密码？</span></a>
				</div>
				<div style="width:330px;height:100px;border-bottom: 0px solid #FFFFFF;margin-top: -30px;">
					<br />
					<!--<button id="login_QQ" type="button" class="btn btn-info">
						<img src="img/qq32.png" style="width:20px;margin-top:-4px;" />&emsp;验证码登录
					</button>-->
					<button type="button" class="layui-btn layui-btn-radius layui-icon layui-icon-vercode" id="toLoginBycode"> 验证码登录</button>
					<!--<button id="login_WB" type="button" class="btn btn-danger">
						<img src="img/sina32.png" style="width:20px;margin-top:-4px;" />&emsp;微博登录
					</button>-->
					<button type="button" class="layui-btn layui-btn-radius layui-icon layui-icon-vercode" id="default2"> 其他登录</button>
					
					</div>
				</div>
			</div>
			
			
			<!-- 验证码登录 -->
			
			<div id='loginByCode' style="display: none;">
				
				<div id="lab1">
					<span id="lab_login">会员登录</span>
					<span id="lab_toLogin">
						<span id='toPassLogin' style="color: #EB9316;cursor: pointer;">返回密码登录</span>
					</span>
				</div>
				<div style="width:330px;">
					<span id="lab_type1">手机号/验证码登陆</span>
				</div>
				<form class="layui-form" action="#">
				<div id="form_LoginByCode" style="padding-top: 25px;">
					
					<input type="text" class="form-control" value="15881601895"  placeholder="用户名" id="loginByCode_account"/>
					<input type="text" class="form-control" placeholder="验证码" id="login_vcode" />
					<input id="getLoginCode" type="button" class="btn btn-success" value="点击发送验证码" onclick="sendLoginCode(this)" />

				</div>
				 <div class="layui-form-item" style="color:#000000;margin-bottom:0px;margin-top: 80px;">
				    <label class="layui-form-label" style="line-height: 30px;">我是？</label>
				    <div class="layui-input-block" style="margin-left: auto;">
				      <input type="radio" name="loginByCode_type" value="学员" title="学员" checked="">
				      <input type="radio" name="loginByCode_type" value="教练" title="教练">
				      <input type="radio" name="loginByCode_type" value="场馆" title="场馆" >
				    </div>
				    </div>
				<input type="button" value="登录" class="btn btn-success" id="loginByCode_btn" />
				</form>
			</div>
			
			<!-- 会员注册 -->
			<div id='regist_container' style="display: none;">
				<div id="lab1">
					<span id="lab_login">会员注册</span>
					<span id="lab_toLogin">
						&emsp;已有账号&nbsp;
						<span id='toLogin' style="color: #EB9316;cursor: pointer;">立即登录</span>
					</span>
				</div>
				<form class="layui-form">
				<div id="form_container2" style="padding-top: 25px;">
					<input type="text" class="form-control" value="15881601895"  placeholder="用户名" id="regist_account"/>
					<input type="password" class="form-control" placeholder="密码" id="regist_password1" />
					<input type="password" class="form-control" placeholder="确认密码" id="regist_password2" />
					<input type="text" class="form-control" placeholder="验证码" id="regist_vcode" />
					<!--<button id="getVCode" type="button" class="btn btn-success" >获取验证码</button>-->
					<input id="getVCode" type="button" class="btn btn-success" value="点击发送验证码" onclick="sendCode(this)" />
				</div>
				 <div class="layui-form-item" style="color:#000000;margin-bottom:0px;margin-top: 80px;">
				    <label class="layui-form-label" style="line-height: 30px;">我是？</label>
				    <div class="layui-input-block" style="margin-left: auto;">
				      <input type="radio" name="register_type" value="学员" title="学员" checked="">
				      <input type="radio" name="register_type" value="教练" title="教练">
				      <input type="radio" name="register_type" value="场馆" title="场馆" >
				    </div>
				    </div>
				    <input type="button" value="注册" class="btn btn-success" id="register_btn" />
				</form>
				</div>

			<!-- 忘记密码 -->
			<div id='reset_password' style="display: none;">
				<div id="lab1">
					<span id="lab_login">重置密码</span>
					<span id="lab_toLogin">
						<span id='returnLogin' style="color: #EB9316;cursor: pointer;">返回登录</span>
					</span>
				</div>
				<form class="layui-form">
					<div id="form_container3" style="padding-top: 25px;">
						<input type="text" class="form-control" value="15881601895"  placeholder="用户名" id="rest_account"/>
						<input type="password" class="form-control" placeholder="新密码" id="rest_password1" />
						<input type="password" class="form-control" placeholder="确认新密码" id="rest_password2" />
						<input type="text" class="form-control" placeholder="验证码" id="rest_vcode" />
						<!--<button id="getVCode" type="button" class="btn btn-success" >获取验证码</button>-->
						<input id="getRestCode" type="button" class="btn btn-success" value="点击发送验证码" onclick="sendRestCode(this)" />
					</div>
					<div class="layui-form-item" style="color:#000000;margin-bottom:0px;margin-top: 80px;">
						<label class="layui-form-label" style="line-height: 30px;">我是？</label>
						<div class="layui-input-block" style="margin-left: auto;">
							<input type="radio" name="rest_type" value="学员" title="学员" checked="">
							<input type="radio" name="rest_type" value="教练" title="教练">
							<input type="radio" name="rest_type" value="场馆" title="场馆" >
						</div>
					</div>
					<input type="button" value="确认重置" class="btn btn-success" id="rest_btn" />
				</form>
			</div>

			</div>
		</div>
</div>
	</body>
	<script type="text/javascript" src="layui/layui.js" ></script>
	<script type="text/javascript">
		//我们强烈推荐你在代码最外层把需要用到的模块先加载
		layui.use(['layer', 'form', 'element'], function(){
			var layer = layui.layer
					,form = layui.form
					,element = layui.element

			//……
			//你的代码都应该写在这里面
			form.render();
		});

	</script>
	<script type="text/javascript">
		//注册验证码
		var clock = '';
		var nums = 30;
		var btn;
		function sendCode(thisBtn) {
			var regist_password1 = $("#regist_password1").val();
			var regist_password2 = $("#regist_password2").val();
			if ((regist_password1==""||regist_password2=="")){
				layer.alert("密码不能为空");
				return;
			}

			if (regist_password1!=regist_password2){
				layer.alert("两次密码不一致");
				return;
			}
			var phoneNumber = $("#regist_account").val();
			btn = thisBtn;
			btn.disabled = true; //将按钮置为不可点击
			btn.value = '重新获取（'+nums+'）';
			clock = setInterval(doLoop, 1000); //一秒执行一次
			var regExp = new RegExp("^((13[0-9])|(14[5,7,9])|(15([0-3]|[5-9]))|(166)|(17[0,1,3,5,6,7,8])|(18[0-9])|(19[8|9]))\\d{8}$");

			if (!regExp.test(phoneNumber)) {
				layer.alert("手机号格式不正确");
			}else{
			//后台获取验证码
			$.ajax({
				url:"/getCode/getRgisterCode",
				type:"post",
				data:{
					phoneNumber:phoneNumber
				},
				success:function(data) {
					if (data.indexOf("成功")!=-1) {
						layer.alert("获取成功");

					}else{
						layer.alert("获取失败");
					}
				}

			});
		}
			
	}

		//登录验证码
		function sendLoginCode(thisBtn) {

			var phoneNumber = $("#loginByCode_account").val();
			var regExp = new RegExp("^((13[0-9])|(14[5,7,9])|(15([0-3]|[5-9]))|(166)|(17[0,1,3,5,6,7,8])|(18[0-9])|(19[8|9]))\\d{8}$");

			if (!regExp.test(phoneNumber)) {
				layer.alert("手机号格式不正确");
				return;
			}
			btn = thisBtn;
			btn.disabled = true; //将按钮置为不可点击
			btn.value = '重新获取（'+nums+'）';
			clock = setInterval(doLoop, 1000); //一秒执行一次

				//后台获取验证码
				$.ajax({
					url:"/getCode/getLoginCode",
					type:"post",
					data:{
						loginPhoneNumber:phoneNumber
					},
					success:function(data) {
						if (data.indexOf("成功")!=-1) {
							layer.alert("获取成功");

						}else{
							layer.alert("获取失败");
						}
					}

				});


		}

		//找回密码验证码
		function sendRestCode(thisBtn) {

			var phoneNumber = $("#rest_account").val();
			var regExp = new RegExp("^((13[0-9])|(14[5,7,9])|(15([0-3]|[5-9]))|(166)|(17[0,1,3,5,6,7,8])|(18[0-9])|(19[8|9]))\\d{8}$");

			if (!regExp.test(phoneNumber)) {
				layer.alert("手机号格式不正确");
				return;
			}
			btn = thisBtn;
			btn.disabled = true; //将按钮置为不可点击
			btn.value = '重新获取（'+nums+'）';
			clock = setInterval(doLoop, 1000); //一秒执行一次

			//后台获取验证码
			$.ajax({
				url:"/getCode/getRestCode",
				type:"post",
				data:{
					restPhoneNumber:phoneNumber
				},
				success:function(data) {
					if (data.indexOf("成功")!=-1) {
						layer.alert("获取成功");

					}else{
						layer.alert("获取失败");
					}
				}

			});


		}


		function doLoop() {
			nums--;
			if (nums > 0) {
				btn.value = '重新获取（'+nums+'）';
			} else {
				clearInterval(clock); //清除js定时器
				btn.disabled = false;
				btn.value = '点击发送验证码';
				nums = 30; //重置时间
			}
		}
			//打开会员登录 
					$("#regist_container").hide();
					$("#_close").show();
					$("#_start").animate({
						left: '350px',
						height: '520px',
						width: '400px'
					}, 500, function() {
						$("#login_container").show(500);
						$("#_close").animate({
							height: '40px',
							width: '40px'
						}, 500);
					});
		
		$(document).ready(function(){
			$("#default2").click(function(){
				layer.alert("暂停使用！");
			});
			$("#login_WB").click(function(){
				layer.alert("暂停使用！");
			});


			//重置密码
			$("#rest_btn").click(function(){
				var rest_password1 = $("#rest_password1").val();
				var rest_password2 = $("#rest_password2").val();
				var phoneNumber = $("#rest_account").val();
				var regExp = new RegExp("^((13[0-9])|(14[5,7,9])|(15([0-3]|[5-9]))|(166)|(17[0,1,3,5,6,7,8])|(18[0-9])|(19[8|9]))\\d{8}$");

				if (phoneNumber==""||!regExp.test(phoneNumber)) {
					layer.alert("手机号格式不正确");
					return;
				}
				if ((rest_password1===""||rest_password2==="")){
					layer.alert("密码不能为空");
					return;
				}

				if (rest_password1!=rest_password2){
					layer.alert("两次密码不一致");
					return;
				}
				var code = $("#rest_vcode").val();
				//获取注册的用户类型
				var rest_type = $("input[name='rest_type']:checked").val();
				if (rest_type=="学员"){
					alert("学员重置密码");
					$.ajax({
						url:"/studentVerify/studentRestPassword",
						type:"post",
						data:{
							restPhone:phoneNumber,
							restPassword:rest_password1,
							code:code
						},
						success:function(data) {
							if (data.indexOf("成功")!=-1) {
								layer.alert("重置成功，正在返回登录");
								$("#regist_container").hide(500);
								$("#loginByCode").hide(500);
								$("#reset_password").hide(500);
								$("#login_container").show(500);
							}else{
								layer.alert(data);
							}
						}

					});
				}else if (rest_type=="教练"){
					alert("教练重置密码");
					$.ajax({
						url:"/trainerVerify/trainerRestPassword",
						type:"post",
						data:{
							restPhone:phoneNumber,
							restPassword:rest_password1,
							code:code
						},
						success:function(data) {
							if (data.indexOf("成功")!=-1) {
								layer.alert("重置成功，正在返回登录");
								$("#regist_container").hide(500);
								$("#loginByCode").hide(500);
								$("#reset_password").hide(500);
								$("#login_container").show(500);
							}else{
								layer.alert(data);
							}
						}

					});
				}else if (rest_type=="场馆"){
					alert("场馆重置密码");
					$.ajax({
						url:"/gymVerify/gymRestPassword",
						type:"post",
						data:{
							restPhone:phoneNumber,
							restPassword:rest_password1,
							code:code
						},
						success:function(data) {
							if (data.indexOf("成功")!=-1) {
								layer.alert("重置成功，正在返回登录");
								$("#regist_container").hide(500);
								$("#loginByCode").hide(500);
								$("#reset_password").hide(500);
								$("#login_container").show(500);
							}else{
								layer.alert(data);
							}
						}

					});
				}

			});

			//注册
			$("#register_btn").click(function(){
				var regist_password1 = $("#regist_password1").val();
				var regist_password2 = $("#regist_password2").val();
				if ((regist_password1===""||regist_password2==="")){
					layer.alert("密码不能为空");
					return;
				}

				if (regist_password1!=regist_password2){
					layer.alert("两次密码不一致");
					return;
				}
				var sPassword = $("#regist_password1").val();
				var code = $("#regist_vcode").val();
				//获取注册的用户类型
				var register_type = $("input[name='register_type']:checked").val();
				alert(sPassword+":"+code+":"+register_type);
				if (register_type=="学员"){
					layer.alert("学员注册");
					$.ajax({
						url:"/studentVerify/studentRegisterByPhone",
						type:"post",
						data:{
							sPassword:sPassword,
							code:code
						},
						success:function(data) {
							if (data.indexOf("注册成功")!=-1) {
								layer.alert("注册成功，正在返回登录");
								$("#regist_container").hide(500);
								$("#loginByCode").hide(500);
								$("#login_container").show(500);
							}else{
								layer.alert(data);
							}
						}

					});
				}else if (register_type=="教练"){
					layer.alert("教练注册");
					$.ajax({
						url:"/trainerVerify/userRegisterByPhone",
						type:"post",
						data:{
							tPassword:sPassword,
							code:code
						},
						success:function(data) {
							if (data.indexOf("注册成功")!=-1) {
								layer.alert("注册成功，正在返回登录");
								$("#regist_container").hide(500);
								$("#loginByCode").hide(500);
								$("#login_container").show(500);
							}else{
								layer.alert(data);
							}
						}

					});
				}else if (register_type=="场馆"){
					layer.alert("场馆注册");
					$.ajax({
						url:"/gymVerify/gymRegisterByPhone",
						type:"post",
						data:{
							gPassword:sPassword,
							code:code
						},
						success:function(data) {
							if (data.indexOf("注册成功")!=-1) {
								layer.alert("注册成功，正在返回登录");
								$("#regist_container").hide(500);
								$("#loginByCode").hide(500);
								$("#login_container").show(500);
							}else{
								layer.alert(data);
							}
						}

					});
				}

			});

			//会员登录-账号密码登录
			$("#login_btn").click(function(){
				var login_number = $("#login_number").val();
				var login_password = $("#login_password").val();
				var rm = $("#rm").val();
				var userType = $("input[name='login_container_type']:checked").val();
				layer.alert(login_number+":"+login_password+":"+rm+":"+userType);
				//根据不同的用户类型匹配对应的请求
				if(userType=="学员"){
					$.ajax({
						url:"/studentVerify/studentLoginByPhone",
						type:"post",
						data:{
							phoneNumber:login_number,
							sPassword:login_password,
							rm:rm,
							UserType:0
						},
						dataType:"json",
						success:function(data) {
							if (data.msg.indexOf("成功")!=-1) {
								if(data.state==0){
									//是新用户，跳转到信息完善界面
									window.location.href="perfectInfo.html";
								}else{
									window.location.href="main.html";
								}
							}else{
								layer.alert(data.msg);
							}
						}

					});
				}else if(userType=="教练"){
					$.ajax({
						url:"/trainerVerify/trainerLoginByPhone",
						type:"post",
						data:{
							phoneNumber:login_number,
							sPassword:login_password,
							rm:rm,
							UserType:1
						},
						dataType:"json",
						success:function(data) {
							if (data.msg.indexOf("成功")!=-1) {
								if(data.state==0){
									//是新用户，跳转到信息完善界面
									window.location.href="trainerPerfectInfo.html";
								}else{
									window.location.href="main.html";
								}
							}else{
								layer.alert(data.msg);
							}
						}

					});
				}else if(userType=="场馆"){
					$.ajax({
						url:"/gymVerify/gymLoginByPhone",
						type:"post",
						data:{
							phoneNumber:login_number,
							gPassword:login_password,
							rm:rm,
							UserType:2
						},
						dataType:"json",
						success:function(data) {
							if (data.msg.indexOf("成功")!=-1) {
								if(data.state==0){
									//是新用户，跳转到信息完善界面
									window.location.href="gymPerfectInfo.html";
								}else{
									window.location.href="html/oneGym.html";
								}
							}else{
								layer.alert(data.msg);
							}
						}
					});
				}
			});

			//验证码登录
			//会员登录
			$("#loginByCode_btn").click(function(){
				var login_number = $("#loginByCode_account").val();
				var login_vcode = $("#login_vcode").val();
				var userType = $("input[name='loginByCode_type']:checked").val();
				alert(login_number+":"+login_vcode+":"+":"+userType);
				//根据不同的用户类型匹配对应的请求
				if(userType=="学员"){
					$.ajax({
						url:"/studentVerify/studentLoginByCode",
						type:"post",
						data:{
							phoneNumber:login_number,
							code:login_vcode,
							UserType:0
						},
						dataType:"json",
						success:function(data) {
							if (data.msg.indexOf("成功")!=-1) {
								if(data.state==0){
									//是新用户，跳转到信息完善界面
									window.location.href="perfectInfo.html";
								}else{
									window.location.href="main.html";
								}
							}else{
								layer.alert(data.msg);
							}
						}

					});
				}else if(userType=="教练"){
					$.ajax({
						url:"/trainerVerify/gymLoginByCode",
						type:"post",
						data:{
							phoneNumber:login_number,
							code:login_vcode,
							UserType:1
						},
						dataType:"json",
						success:function(data) {
							if (data.msg.indexOf("成功")!=-1) {
								if(data.state==0){
									//是新用户，跳转到信息完善界面
									window.location.href="trainerPerfectInfo.html";
								}else{
									window.location.href="main.html";
								}
							}else{
								layer.alert(data.msg);
							}
						}

					});
				}else if(userType=="场馆"){
					$.ajax({
						url:"/gymVerify/gymLoginByCode",
						type:"post",
						data:{
							phoneNumber:login_number,
							code:login_vcode,
							UserType:2
						},
						dataType:"json",
						success:function(data) {
							if (data.msg.indexOf("成功")!=-1) {
								if(data.state==0){
									//是新用户，跳转到信息完善界面
									window.location.href="gymPerfectInfo.html";
								}else{
									window.location.href="html/oneGym.html";
								}
							}else{
								layer.alert(data.msg);
							}
						}

					});
				}


			});
			
		});
		
	</script>

</html>